<!DOCTYPE html>
<html lang="en">
<head>

    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <meta charset="UTF-8">
    <title>movies</title>
    <style>
        .active {
            color: #7fb80e;
        }

        .switch_movie_label_checked {
            background-color: red;
        }

        ul {
            margin: 0;
        }

        #channel_show_icon_parent, ul {
            transition-duration: 300ms;
        }

        /*手机*/
        @media (max-width: 1100px) {
            li {
                padding: 10px;
            }

            .right_movie_list {
                background: rgba(255, 0, 0, 0.2);
                overflow: scroll;
                z-index: 2147483647;
                list-style-type: none;
                padding: 0;
                margin: 0;
                position: absolute;
                top: 10px;
                right: 10px;
                width: 100px;
                color: rgba(230, 230, 230, 0.5);
            }

            ul {
                width: 120px;
            }

            .hide_movie_list {
                margin-right: -120px;
            }

            .bottom_movie_list {
                overflow: scroll;
                height: 100%;
                width: 100%;
                color: black;
            }

            .bottom_movie_list li {
                padding-top: 15px;
                padding-bottom: 15px;
                font-size: 15px;
            }

            #channel_show_icon_parent {
                color: #333333;
                width: 30px;
                height: 60px;
                position: absolute;
                top: 20px;
                z-index: 2147483647;
                background-color: rgba(255, 255, 255, 0.2);
            }

            .hide_movie_list_icon {
                right: 20px;
            }

            .showed_movie_list_icon {
                right: 120px;
            }

            .icon {
                float: right;
                margin-top: 20px;
                width: 1em;
                height: 1em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
            }

            .switch_movie_list_label {
                color: white;
                width: 20px;
                height: 20px;
                border-radius: 20px;
                border: 1px solid #333333;
                text-align: center;
                display: inline-block;
            }

            .internet_alert {
                border-bottom: 1px solid #eeeeee;
                padding-bottom: 15px;
                color: #828282;
                font-size: 10px;
            }
        }

        /*平板或电脑*/
        @media (min-width: 1200px) {
            li {
                padding: 20px;
                padding-left: 30px;
                padding-right: 30px;
            }

            .right_movie_list {
                background: rgba(255, 255, 255, 0.2);
                overflow: scroll;
                z-index: 2147483647;
                list-style-type: none;
                padding: 0;
                margin-left: 0px;
                margin-top: 0px;
                margin-bottom: 0px;
                position: absolute;
                top: 10px;
                right: 10px;
                color: rgba(230, 230, 230, 0.5);
                /*width: 100px;*/
            }

            ul {
                width: 150px;
            }

            .hide_movie_list {
                margin-right: -160px;
            }

            .bottom_movie_list {
                overflow: scroll;
                height: 100%;
            }

            #channel_show_icon_parent {
                color: #333333;
                width: 30px;
                height: 60px;
                position: absolute;
                top: 20px;
                z-index: 2147483647;
                background-color: rgba(255, 255, 255, 0.2);
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
            }

            .hide_movie_list_icon {
                right: 0px;
            }

            .showed_movie_list_icon {
                right: 160px;
            }

            .icon {
                margin-left: 10px;
                margin-top: 20px;
                width: 1em;
                height: 1em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
                color: rgba(230, 230, 230, 0.5);
            }

            .switch_movie_list_label {
                color: white;
                width: 20px;
                height: 20px;
                border-radius: 20px;
                border: 1px solid #333333;
                text-align: center;
                display: inline-block;
            }

            .internet_alert {
                display: none;
            }
        }
    </style>
</head>
<body>

<video controls x-webkit-airplay="allow" webkit-playsinline="true" playsinline x5-video-player-type="h5-page"
       style="z-index: 1;" autoplay
       id="video_player" src="" width="100%"
>
</video>


<div class="internet_alert" style="margin-top: 10px">连接wifi看，否则会消耗手机流量。
    <span style="color:red">切勿相信视频中的诈骗广告！</span>
    <span onclick="switchChannelPosition()" style="float: right;display: none">列表放在底部
            <span
                    class="switch_movie_list_label"
                    id="switch_label">✓</span>
        </span>
</div>


<ul style="z-index: 2" id="movies_list"></ul>

<div class="showed_movie_list_icon" onclick="onChannelIconClick()" id="channel_show_icon_parent">
    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2439">
        <path d="M401.07 708.27L206.93 512 403.2 315.73 341.33 256l-256 256 256 256 59.74-59.73z m221.86 0L819.2 512 622.93 315.73 682.67 256l256 256-256 256-59.74-59.73z" p-id="2440"></path>
    </svg>
</div>

<script>
    // 湖南卫视备用 http://112.50.243.8/PLTV/88888888/224/3221225827/1.m3u8
    const movieList = [
        {"title": "十*万*个*冷*笑*话", "url": "https://v4.szjal.cn/20200429/LkOi4c7l/1000kb/hls/index.m3u8"},
        {"title": "决*战*刹*马*镇", "url": "https://video.buycar5.cn/20200920/vMkLfmGt/1000kb/hls/index.m3u8"},
        {"title": "海*底*总*动*员", "url": "https://www.dgzhuorui.com:65/20201112/qSY0RHfC/1200kb/hls/index.m3u8"},
        {"title": "闪*光*少*女", "url": "https://v4.szjal.cn/20200421/zLnP3cUN/index.m3u8"},
        {"title": "机*器*侠", "url": "https://video.buycar5.cn/20200912/XHrJIEa0/1000kb/hls/index.m3u8"},
        {"title": "绝*地*逃*亡", "url": "https://video.buycar5.cn/20200903/TpvOJDXS/index.m3u8"},
        {"title": "流*浪*地*球", "url": "https://3.mhbobo.com/20191031/NKMFo1UK/index.m3u8"},
        {"title": "你*好*李*焕*英", "url": "https://lbjx9.com/?url=https://video.hcyunshang.cn/20210215/cEkErZnB/index.m3u8"},
        {"title":"大*赢*家","url":"https://vod2.buycar5.cn/20201027/hABFNvdL/1000kb/hls/index.m3u8"},
        {"title":"举*起*手*来","url":"https://vod.bunediy.com/20200508/2ZkYVE6o/index.m3u8"},
        {"title":"鼠*胆*英*雄","url":"https://kk.jinpuyuan.net/dp/?url=https://e.mahua-kb.com/20200924/TMfv8aQ7/index.m3u8"},
        {"title":"功*夫*熊*猫1","url":"https://kk.jinpuyuan.net/dp/?url=https://e.mahua-kb.com/20200924/TMfv8aQ7/index.m3u8"},
        {"title":"罗*小*黑*战*记","url":"https://video.dious.cc/videos_2019_1/v_19rrhlbh27/1000kb/hls/index.m3u8"}

    ];


    const channelParent = document.querySelector("#movies_list");
    const channelShowHideIcon = document.querySelector("#channel_show_icon_parent");
    const player = document.querySelector("#video_player");


    channelShowHideIcon.style.top = (screen.availWidth / 16 * 9 - 60) / 2 + "px";
    player.style.height = screen.availWidth / 16 * 9 + "px";
    channelParent.style.height = screen.availWidth / 16 * 9 + "px";

    let position = window.localStorage["last_movie_position"];
    if (position === undefined) {
        position = 0;
    }
    player.src = movieList[position].url;


    const channelClickListener = function (e) {
        player.src = movieList[e.target.dataset.position].url;
        channelParent.getElementsByTagName("li")[position].classList.remove("active");
        position = e.target.dataset.position;
        window.localStorage["last_movie_position"] = e.target.dataset.position;
        channelParent.getElementsByTagName("li")[position].classList.add("active")
    };
    for (let i = 0; i < movieList.length; ++i) {
        const ele = document.createElement("li");
        ele.innerText = movieList[i].title;
        ele.dataset.position = i + "";
        ele.onclick = channelClickListener;
        channelParent.appendChild(ele);
        if (i === position) {
            ele.classList.add("active")
        }
    }


    let showChannel = true;

    function onChannelIconClick(e) {
        if (showChannel) {
            channelParent.classList.add("hide_movie_list");
            showChannel = false;
            channelShowHideIcon.classList.remove("showed_movie_list_icon");
            channelShowHideIcon.classList.add("hide_movie_list_icon");
        } else {
            showChannel = true;
            channelParent.classList.remove("hide_movie_list");
            channelShowHideIcon.classList.add("showed_movie_list_icon");
            channelShowHideIcon.classList.remove("hide_movie_list_icon");
        }
    }


    const switchLabel = document.querySelector("#switch_label");

    //
    // var channelsRight = window.localStorage["channels_right"];
    // if (channelsRight === undefined) {
    //     channelsRight = true;
    //
    // }
    // if (channelsRight === 'true') {
    //     showChannelRight();
    // } else {
    //     showChannelBottom();
    // }

    function switchChannelPosition(e) {
        if (channelsRight) {
            showChannelBottom()
        } else {
            showChannelRight()
        }
    }

    function showChannelRight() {
        channelsRight = true;

        channelParent.classList.add("right_movie_list");

        channelParent.classList.remove("bottom_movie_list");
        channelParent.style.height = (screen.availWidth / 16 * 9) + "px";

        switchLabel.classList.remove("switch_movie_label_checked");
        window.localStorage["channels_right"] = true;

        channelShowHideIcon.style.display = "inline-block";

    }

    function showChannelBottom() {
        channelParent.classList.remove("right_movie_list");
        channelParent.classList.add("bottom_movie_list");
        switchLabel.classList.add("switch_movie_label_checked");

        channelParent.style.height = (screen.availHeight - 55 - screen.availWidth / 16 * 9) + "px";

        channelsRight = false;

        window.localStorage["channels_right"] = false;
        channelShowHideIcon.style.display = "none";
    }


    channelParent.scrollTop = (player.clientHeight / 7) * (position - 2);


    //判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
        if (window.orientation === 180 || window.orientation === 0) {
            console.log('竖屏状态！' + screen.availHeight + " " + screen.availWidth);
            player.style.height = screen.availWidth / 16 * 9 + "px";
            // channelParent.style.height = screen.availWidth / 16 * 9 + "px";

            channelShowHideIcon.style.top = (screen.availWidth / 16 * 9 - 60) / 2 + "px";


            // quitFullScreen()
        } else if (window.orientation === 90 || window.orientation === -90) {
            console.log('横屏状态！' + screen.availHeight + " " + screen.availWidth);
            player.style.height = screen.availHeight + "px";
            // channelParent.style.height = screen.availHeight + "px";

            channelShowHideIcon.style.top = (screen.availHeight - 60) / 2 + "px";


            // requestFullScreen(document.querySelector("#test"))
        }
    }, false);


    function isMobile() {
        let info = navigator.userAgent;
        let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
        for (let i = 0; i < agents.length; i++) {
            if (info.indexOf(agents[i]) >= 0) return true;
        }
        return false;
    }

    function mobileChannelPosition() {
        if (isMobile()) {
            // channelParent.classList.add("bottom_movie_list")
            showChannelBottom();
        } else {
            // channelParent.classList.add("right_movie_list")
            showChannelRight();
        }
    }

    mobileChannelPosition();

    //video/audio 标签属性：
    // loop：设置视频／音频循环播放
    // controls：显示视频／音频默认控制条
    // autoplay：设置视频／音频立即播放（自动播放）

    //video／audio js对象属性及方法
    //player.duration:视频／音频时长；
    //player.paused:视频／音频是否暂停；
    //player.volume//视频／音频声音大小0.0-1.0；
    //player.muted//视频／音频声音是否静音；
    //player.ended//视频／音频是否播放结束；
    // player.currentTime//视频／音频已播放时间；
    // player.video.playbackRate//视频／音频倍速；

    // player.play()视频播放
    // player.pause()视频暂停

    //
    // function requestFullScreen(element) {
    //     if (isFullScreen()) {
    //         return;
    //     }
    //     // var element = document.querySelector("div");
    //     if (element.requestFullscreen) {
    //         element.requestFullscreen();
    //     } else if (element.webkitRequestFullScreen) {
    //         element.webkitRequestFullScreen();
    //     } else if (element.mozRequestFullScreen) {
    //         element.mozRequestFullScreen();
    //     } else if (element.msRequestFullScreen) {
    //         element.msRequestFullScreen();
    //     }
    // }
    //
    // function quitFullScreen() {
    //     if (!isFullScreen()) {
    //         return;
    //     }
    //     if (document.cancelFullscreen) {
    //         document.cancelFullscreen();
    //     } else if (document.webkitCancelFullScreen) {
    //         document.webkitCancelFullScreen();
    //     } else if (document.mozCancelFullScreen) {
    //         document.mozCancelFullScreen();
    //     } else if (document.msCancelFullScreen) {
    //         document.msCancelFullScreen();
    //     }
    // }
    //
    //
    // function isFullScreen() {
    //     if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
    //         return true;
    //     } else {
    //         return false;
    //     }
    // }
</script>
</body>
</html>
